<template>
  <XNavBar title="美文赏析" titleColor="#000000" bgColor="#EDEDED"></XNavBar>
  <XNavigateBackIcon></XNavigateBackIcon>
  <view class="pageWrap" :style="styles">
    <view class="searchWrap">
      <uni-search-bar
        v-model="state.listFilter.keywords"
        class="searchBar"
        placeholder="请输入关键词检索"
        bgColor="#F4F4F4"
        radius="18"
        @confirm="searchValue"
        @cancel="cancelSearch"
        @clear="cancelSearch"
      />
    </view>
    <scroll-view class="noScrollBar" :scroll-y="false" :scroll-x="true">
      <view class="typeListWrap">
        <view
          :class="{ item: true, active: +item.id === +state.listFilter.type_id }"
          v-for="item in state.typeList"
          :key="item.id"
          @click.stop="selectType(item)"
        >
          <text class="text">{{ item.type_name }}</text>
          <view class="line"> </view
        ></view>
        <view class="displayNone"></view>
      </view>
    </scroll-view>
    <scroll-view
      id="scrollWrap"
      class="scrollWrap"
      :scroll-y="true"
      :scroll-x="false"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      refresher-background="rgba(255,255,255,0.6)"
      @scrolltolower="loadingMore"
      @refresherrefresh="refreshList"
    >
      <view class="newsList" v-if="state.listData[0]?.id">
        <view
          class="item"
          v-for="item in state.listData"
          :key="item.id"
          @click.stop="onClickListItem(item)"
        >
          <XPicture class="pictureWrap img" :url="fileUrl(item.img)"></XPicture>
          <view class="info">
            <view class="ellipsisAreaText title">{{ item.title }}</view>
            <view class="foot">
              <view class="time">{{ item.add_time }}</view>
              <view class="numWrap">
                <uni-icons class="icon" type="eye" size="20" color="#999999"></uni-icons>
                <view class="num">{{ item.browse_num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <XNothing v-else></XNothing>
      <uni-load-more v-if="state.listFilter.page > 1" :status="loadStatusFormat"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { request, catchException } from "@/util/request";
import { setPagePadding, fileUrl } from "@/util/util";
import { navigate } from "@/util/navigate";
const styles = computed(() => setPagePadding({}));
onLoad(() => {
  getType();
});
onShow(() => {});
const state = reactive({
  typeList: [{ id: 0, type_name: "全部新闻", type: 2 }],
  listFilter: { page: 1, limit: 10, type_id: "", keywords: "" },
  listData: [{ id: "", img: "", title: "", url: "", add_time: "", browse_num: 0 }],
});
function searchValue() {
  refreshing.value = true;
}
function cancelSearch() {
  if (state.listFilter.keywords) {
    state.listFilter.keywords = "";
    refreshing.value = true;
  }
}
async function getType() {
  try {
    const res = await request({
      url: "wechat/news/typeList",
      method: "GET",
      data: {},
    });
    state.typeList = [{ id: 0, type_name: "全部新闻" }, ...res.data.content];
    state.listFilter.type_id = state.typeList[0].id + "";
    refreshing.value = true;
  } catch (error) {
    catchException(error);
  }
}
function selectType(item: any) {
  if (refreshing.value) return;
  setTimeout(() => {
    state.listFilter.type_id = item.id;
    refreshing.value = true;
  }, 200);
}
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const loadStatusFormat = computed(() => {
  if (loading.value) {
    return "loading";
  } else if (finished.value) {
    return "no-more";
  } else {
    return "more";
  }
});
function loadingMore() {
  refreshing.value = false;
  if (!finished.value && loading.value !== true) {
    loading.value = true;
    state.listFilter.page = state.listFilter.page + 1;
    getList({ loading: false });
  }
}
function refreshList() {
  loading.value = false;
  finished.value = false;
  refreshing.value = true;
  state.listFilter.page = 1;
  getList({ loading: false, action: "refresh" });
}
async function getList(options: Api.IListProps) {
  try {
    const res = await request({
      url: "wechat/news/list",
      data: { ...state.listFilter },
      ...options,
    });
    if (options.action === "refresh") {
      state.listData = [];
    }
    const resList = res.data.content.data;
    if (loading.value) {
      loading.value = false;
      state.listData = [...state.listData, ...resList];
    } else {
      refreshing.value = false;
      state.listData = [...resList];
    }
    finished.value = resList.length !== state.listFilter.limit;
  } catch (error) {
    if (options.action === "refresh") {
      state.listData = [];
    }
    finished.value = true;
    loading.value = false;
    refreshing.value = false;
    catchException(error);
  }
}
async function onClickListItem(item: any) {
  item.browse_num = +item.browse_num + 1;
  navigate({
    url: "/pNews/detail/index",
    query: { id: item.id },
    navMethod: "navigate",
  });
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
